<template>
	<view class="content">
		<view class="inputLay">

			<uni-easyinput :styles="styles" :placeholderStyle="placeholderStyle" primaryColor="#FF9BA7"
				v-model.trim="value" placeholder="请输入修改的昵称" suffixIcon="closeempty" @iconClick="iconClick"
				:maxlength="maxlength">

			</uni-easyinput>
		</view>
		<view class="tipLay">

			<view class="maxLength">
				{{value.length}}/{{maxlength}}字
			</view>
			<view class="maxLengthTip">
				昵称可使用中文、英文、数字和部分字符
			</view>
		</view>
		<view class="buttonLay">
			<view class="butStyle" @click="updateUserInfo">
				完成
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				placeholderStyle: "color:#B6B6B6;font-size:16px",

				styles: {
					backgroundColor: " #FFF",
					borderColor: '#FFF',
					color: '#454545',
					height: '40px'
				},
				maxlength: 8,
				userInfoData:{},
			}
		},
		onLoad() {
			
		this.value=uni.getStorageSync('userInfo').nickname||'';
		},
		async onShow() {
			await this.$onLaunched
		},
		// onShareAppMessage(res) {
		// 	return {
		// 		title: "给你分享了一份宝藏，快进来看看～",
		// 		path: '/pages/index/index',
		// 		imageUrl: '../../static/share.png'
		// 	};
		// },
		methods: {
			iconClick() {
				this.value = ''
			},
			updateUserInfo() {
				if(this.value==''){
					return this.$showToast('请填写昵称');
				}
				if(this.value.length>8){
					return this.$showToast('请填写正确的昵称');
				}
				
				this.$http('/v1/users/update-info', {
					nickname:this.value
				}, 'POST').then(res => {
					console.log(res);
					if (res.code == 0) {
						this.$showToast('修改成功');
						this.getOpenerEventChannel().emit('refreshData')
						setTimeout(() => uni.navigateBack(), 500);
					}else{
						this.$showToast(res.msg)
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding-top: 54upx;
		font-family: SourceHanSansSC, SourceHanSansSC !important;
	}

	::v-deep .inputLay {
		box-shadow: 0upx 4upx 8upx 0upx rgba(233, 233, 233, 0.5);

		.uni-easyinput {
			font-family: SourceHanSansSC, SourceHanSansSC !important;

			.is-input-border {
				// border-radius: 34upx;
				height: 87upx;

				.uni-easyinput__content-input {
					padding-left: 50upx !important;
					font-size: 32upx;

				}

				.content-clear-icon {
					padding-right: 50upx;

					.uni-icons {
						color: #999999 !important;
					}
				}
			}
		}
	}

	.tipLay {
		padding-right: 34upx;

		.maxLength {
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 400;
			font-size: 31upx;
			color: #9D9D9D;
			line-height: 46upx;
			letter-spacing: 1px;
			text-align: right;
			margin-top: 20upx;
			margin-bottom: 22upx;
		}

		.maxLengthTip {
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 400;
			font-size: 23upx;
			color: #9D9D9D;
			line-height: 32upx;
			text-align: right;
		}
	}

	.buttonLay {
		position: relative;

		.butStyle {
			position: fixed;
			bottom: 112upx;
			left: 42upx;
			right: 42upx;
			font-family: SourceHanSansSC, SourceHanSansSC !important;
			width: 666rpx;
			height: 101rpx;
			border-radius: 52rpx;
			text-align: center;
			line-height: 101rpx;
			font-weight: bold;
			font-size: 38rpx;
			color: #FFFFFF;

			background: #FF7994;
		}


	}
</style>